<template>
    <div class="rightTwo">
        <ThemeTitlenew :title="title" />
        <div class="flightList">
            <div class="tabs">
                <!-- <div
                    class="tab"
                    v-for="(item, index) of tabsList"
                    @click="tabClick(index)"
                    :class="{ active: index == currIndex }"
                    :key="index"
                >
                    <span>{{ item.name }}</span>
                    <span>{{ item.val }}</span>
                </div> -->
                <div class="tab">
                    <span>飞入：{{}}</span>
                    <span>飞入：{{}}</span>
                    <span>飞入：{{}}</span>
                    <span>飞入：{{}}</span>
                </div>
            </div>
            <div class="flightHead">
                <div
                    class="flightHeadList"
                    v-for="(item, index) in thead"
                    :key="index"
                >
                    {{ item }}
                </div>
            </div>
            <div class="myscroll">
                <ul class="flightBody">
                    <li
                        class="flightBodyList"
                        v-for="(item, index) in tbody[currIndex]"
                        :key="index"
                    >
                        <!-- <div>{{item.icon}}</div> -->
                        <div>{{ item["航班号"] }}</div>
                        <div>{{ item["始发地"] }}</div>
                        <div>{{ item["终点站"] }}</div>
                        <div>{{ item["计划降落"] }}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitlenew from "../../common/ThemeTitlenew";
import { onMounted, ref, provide, nextTick, reactive } from "vue";
import axios from "axios";
import one from "./one.json"
import two from "./two.json"
export default {
    components: {
        ThemeTitlenew,
    },

    setup() {
        const title = provide("title", "进出港航班");
        const thead = ["航班号", "出发地", "目的地", "到达时间"];
        const currIndex = ref(0);
        let tbody = reactive([[], []]);
        tbody[0].forEach((item) => {
            reactive(item);
        });
        tbody[1].forEach((item) => {
            reactive(item);
        });
        const tabsList = [
            { name: "进港航班", val: "132" },
            // { name: "出港航班", val: "260" },
        ];

        function tabClick(index) {
            currIndex.value = index;
        }
        function initSensotWebsocket() {
            // let a = 航班统计信息:{"time":"20210812205845","flightIn":123,"flightOut":153,"intlFlightIn":0,"intlFlightOut":0}
			let websocket = null
			var that = this
             const wsuri = 'ws://192.168.1.147:8083/ws/mqtt?Authorization=aGFpa29maXJlYWxhcm1zeXN0ZW1rZXk=';
			if ('WebSocket') {
				websocket = new WebSocket(wsuri)
                // websocket = new WebSocket(window.huoqingUrl)
			} else {
				alert('当前浏览器 Not support websocket')
			}
			//连接发生错误的回调方法
			websocket.onerror = function() {
				console.log('WebSocket连接发生错误')
			}
			//连接成功建立的回调方法
			websocket.onopen = function() {
				console.log('WebSocket连接成功')
			}
			//接收到消息的回调方法
			websocket.onmessage = function(event) {
				// console.log(JSON.parse(event.data))
				// if (!event.data || !JSON.parse(event.data).length || JSON.parse(event.data).length == 0) {
				// 	return
				// }
                // let data = 航班统计信息:
                
                // console.log(event.data)

                // console.log(event.data["航班统计信息"])
                // console.log(event)
                let res = JSON.parse(event.data)
                console.log(res)
            //   if(event.data.type == "航班详细信息"){
            //     console.log(one.data)
            //   }
            //   if(event.data.type == "航班统计信息"){
            //     console.log(JSON.parse(two.data))
            //   }
                // if()
                // console.log(res)
                // console.log(res.data)
                // if(res.type == "航班统计信息"){
                //     console.log(res.data)
                // }else if(res.type == "航班详细信息"){
                //     console.log(res.data)
                // }
                // for(var i in event.data){
                //     console.log(event.data[i])
                // }

                // console.log(event.data.航班详细信息)
				// console.log(that.contentData)
			}
			//连接关闭的回调方法
			// websocket.onclose = function() {
			// 	console.log('WebSocket连接关闭')
			// }
			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function() {
				closeWebSocket()
			}
			//关闭WebSocket连接
			function closeWebSocket() {
				websocket.close()
			}
		}
        onMounted(() => {
            Promise.all([
                axios.get("./data/geojson/海口美兰机场进港航班动态.json"),
                axios.get("./data/geojson/海口美兰机场出港航班动态.json"),
                axios.get("./data/geojson/三亚凤凰机场进港航班动态.json"),
                axios.get("./data/geojson/三亚凤凰机场出港航班动态.json"),
            ]).then((res) => {
                tbody[0] = res[0].data.concat(res[2].data);
                tbody[1] = res[1].data.concat(res[3].data);
                $(function () {
                    $(".myscroll").myScroll({
                        speed: 40, //数值越大，速度越慢
                        rowHeight: 26, //li的高度
                    });
                });
            });
            initSensotWebsocket()
            if(one.type == "航班详细信息"){
                console.log(one.data)
            }
            if(two.type == "航班统计信息"){
                console.log(JSON.parse(two.data))
            }
        });
        nextTick(() => {});
        return {
            thead,
            tbody,
            title,
            tabsList,
            currIndex,
            tabClick,
            initSensotWebsocket
        };
    },
};
</script>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightTwo {
        .flightList {
            margin-top: vh(10);
            margin-bottom: vh(20);
            height: vh(168);
            overflow: hidden;

            .tabs {
                display: flex;
                justify-content: space-around;
                margin-bottom: vh(16);
                width: 100%;
                cursor: pointer;

                .tab {
                    flex: 1;
                    background: #023850;
                    border: 1px solid #07384D;
                    display: flex;
                    justify-content: space-around;
                    line-height: vh(27);
                    padding-left: vw(40);
                    padding-right: vw(40);
                    font-size: vw(15);
                      background: #03587e;
                    border: 1px solid #1398cf;
                }

                .active {
                    background: #03587e;
                    border: 1px solid #1398cf;
                }
            }

            .flightHead {
                width: vw(363);
                height: vh(30);
                line-height: vh(28);
                display: flex;
                justify-content: space-between;
                font-size: vw(15);

                .flightHeadList {
                    flex-shrink: 0;
                    flex: 3;
                    text-align: center;
                    color: #37DCFF;
                    font-weight: 700;
                }

                div:nth-child(1) {
                    flex-shrink: 0;
                    flex: 2;
                    border-bottom: 1px solid #213034;
                    text-align: center;
                    font-weight: 400;
                }
            }
        }

        .myscroll {
            height: vh(90);
            overflow: hidden;

            .flightBody {
                .flightBodyList {
                    display: flex;
                    justify-content: space-between;
                    width: vw(363);
                    height: vh(28);
                    line-height: vh(28);
                    font-size: vw(14);

                    div {
                        flex-shrink: 0;
                        flex: 3;
                        border-top: 1px solid #213034;
                        text-align: center;
                        font-weight: 400;
                    }

                    div:nth-child(1) {
                        flex-shrink: 0;
                        flex: 2;
                        border-top: 1px solid #213034;
                        text-align: center;
                        font-weight: 400;
                    }
                }
            }
        }
    }
}
</style>

<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .rightTwo {
        position: absolute;
        top: vh(410);
        right:vw1(25);
        .flightList {
            // margin-top: vh(2);
            margin-bottom: vh(20);
            height: vh(260);
            overflow: hidden;
            // background :pink;
            .tabs {
                display: flex;
                justify-content: space-around;
                margin-bottom: vh(26);
                width: vw1(414);
                margin-top: vh(20);
                cursor: pointer;
                background :pink;
                .tab {
                    flex: 1;
                    background: #023850;
                    border: 1px solid #07384D;
                    display: flex;
                    justify-content: space-around;
                    line-height: vh(40);
                    padding-left: vw1(40);
                    padding-right: vw1(40);
                    font-size: vw1(18);
                }

                .active {
                    background: #03587e;
                    border: 1px solid #1398cf;
                }
            }

            .flightHead {
                width: vw1(414);
                height: vh(40);
                line-height: vh(30);
                display: flex;
                justify-content: space-between;
                font-size: vw1(15);
                .flightHeadList {
                    flex-shrink: 0;
                    flex: 3;
                    text-align: center;
                    color: #37DCFF;
                    font-weight: 700;
                }

                div:nth-child(1) {
                    flex-shrink: 0;
                    flex: 2;
                    border-bottom: 1px solid #213034;
                    text-align: center;
                    font-weight: 400;
                }
            }
        }

        .myscroll {
            height: vh(130);
            overflow: hidden;
            .flightBody {
                .flightBodyList {
                    display: flex;
                    justify-content: space-between;
                    width: vw1(414);
                    height: vh(40);
                    line-height: vh(40);
                    font-size: vw1(16);

                    div {
                        flex-shrink: 0;
                        flex: 3;
                        border-top: 1px solid #213034;
                        text-align: center;
                        font-weight: 400;
                    }

                    div:nth-child(1) {
                        flex-shrink: 0;
                        flex: 2;
                        border-top: 1px solid #213034;
                        text-align: center;
                        font-weight: 400;
                    }
                }
            }
        }
    }
}
</style>